import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { Divider, Modal, InputNumber, Input, Button } from 'antd'
import CurrencySelect from '../../components/CurrencySelect'
import album from '../../assets/album.jpeg'
import arcpayLogo from '../../assets/arcpay.jpg'
import qr from '../../assets/qr.png'

class PayModal extends React.Component {
  render() {
    return (
      <Modal
        {...this.props}
        className='arcpay-modal'
      >
        <div className='modal-content'>
          <div className='header'>
            <img src={album} alt='arcpay' />
          </div>
          <div className='header'>
            <div className='text'>
              "Divide" Album by Ed Sheeran (Quantity: 1)
            </div>
          </div>
          <Divider />
          <div className='item'>
            <div className='desc'>Amount in CNY</div>
            <div className='content'><InputNumber disabled value={10} /></div>
          </div>
          <div className='item'>
            <div className='desc'>Choose Currency</div>
            <div className='content'>
              <CurrencySelect
                value='ETH'
              />
            </div>
          </div>
          <div className='item'>
            <div className='desc'>Amount in ETH</div>
            <div className='content'><InputNumber value={0.008291873964} /></div>
          </div>
          <div className='item'>
            <div className='desc'>Address</div>
            <div className='content'><Input value='0xadBd0E1a569ce5AE35951540a4FEc34c4BA14f44' /></div>
          </div>
          <div className='qr'>
            <img src={qr} alt='' />
          </div>
          <Button type='primary'>Copy Address</Button>
          <Divider />
          <div className='footer'>
            <img src={arcpayLogo} alt='arcpay' />
            <div className='text'>
              <h1>ArcPay</h1>
            </div>
          </div>
        </div>
      </Modal>
    )
  }
}

const mapStateToProps = (state) => {
  return {}
}

const mapDispatchToProps = dispatch => ({})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PayModal))
